<?php
/**
 * Moo Extension
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * @category   Moo
 * @package    Moo_Catalog
 * @author     Mohamed Alsharaf <mohamed.alsharaf@gmail.com>
 * @copyright  Copyright (c) 2010 Mohamed Alsharaf. (http://jamandcheese-on-phptoast.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */
/**
 * Product media data template
 *
 * @see Mage_Catalog_Block_Product_View_Media
 */
?>
<style>
	.li-breviaryImg .flex-direction-nav{
		display: block;
	}
	.li-breviaryImg .flex-direction-nav .flex-nav-prev a{
		left: -30px;
	}
	.li-breviaryImg .flex-direction-nav .flex-nav-next a{
		right: -30px;
	}
	.li-breviaryImg .flex-direction-nav{
		top: 24%;
	}
</style>

<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$_wishlistSubmitUrl = $this->helper('wishlist')->getAddUrl($_product);
?>
<?php
$galleryImages = $this->getGalleryImages();
if (count($galleryImages) > 0) {
    $gallery = '<div class="li-breviaryImg flexsliders">';
    $gallery .= '<ul class="slides">';
    foreach ($galleryImages as $_image) {
        $gallery .= '<li>'
                . '<a id="cloud-zoom-gallery' . $i . '" href="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()) . '" '
                . 'rel="useZoom: \'cloudZoom\', smallImage: \'' . $this->getCloudImage($this->getProduct(), $_image) . '\'" class="cloud-zoom-gallery" title="' . $this->htmlEscape($_image->getLabel()) . '">'
                . '<img src="' . $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56) . '" width="56" height="56" alt="' . $this->htmlEscape($_image->getLabel()) . '" />'
                . '</a></li>';
    }
    $gallery .= '</ul></div>';
	$gallery .='<div class="li-proTip">'
				.'<div class="left">商品编码：' . $_product->getSku() .'</div>'
				.'<div  class="right">'
				.'<a href = '. $_wishlistSubmitUrl .' class="li-collect">收藏商品</a></div></div>';


}
?>

<script src="<?php echo $this->getSkinUrl('js/jquery.flexslider-min.js') ?>"></script>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
    <p class="product-image product-image-zoom">
        <a rel="<?php echo $this->renderCloudOptions(); ?>" <?php echo $this->renderLightboxOptions(); ?> gallery="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" class="cloud-zoom" id="cloudZoom">
            <?php
            $_img = '<img id="image" src="' . $this->getCloudImage($_product) . '" alt="' . $this->htmlEscape($this->getImageLabel()) . '" title="' . $this->htmlEscape($this->getImageLabel()) . '" />';
            echo $_helper->productAttribute($_product, $_img, 'image');
            ?>
        </a>
    </p>
    <?php if (isset($gallery)): ?>
        <?php echo $gallery; ?>
    <?php endif; ?>
<?php else: ?>
    <p class="product-image">
        <?php
        $_img = '<img src="' . $this->helper('catalog/image')->init($_product, 'image')->resize(478) . '" alt="' . $this->htmlEscape($this->getImageLabel()) . '" title="' . $this->htmlEscape($this->getImageLabel()) . '" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
        ?>
    </p>
<?php endif; ?>
<script>
(function($){
	//推荐商品滚动展示
	$(".flexsliders").flexslider({
		animation: "slide",
		animationLoop: true,
		itemWidth:30,
		directionNav: true,
		controlNav: false,
		pauseOnHover: true,
		prevText: "",
		nextText: "",
		minItems: 5,
		maxItems: 5
	});
})(jQuery)

</script>